<template>
  <div>
    <el-container>
      <el-header>
        <img src="../assets/images/login.png" alt="" />
        <span><b>任务悬赏平台</b></span>
      </el-header>
      <el-main class="main">
        <div class="img">
          <div class="content">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleFormRef"
              label-width="90px"
              class="demo-ruleForm"
            >
              <el-form-item label="手机号：" prop="username" class="phonew">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>

              <el-form-item label="密 码：" prop="password" class="phonew">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  style="margin-top: 23px; height: 37px; width: 230px"
                  type="primary"
                  @click="centerDialogVisible = true"
                  >立即登录</el-button
                >
                <el-dialog
                  title="提示"
                  :visible.sync="centerDialogVisible"
                  width="30%"
                  center
                >
                  <span style="margin-left:100px">在登录平台前，请您先选择用户！</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" style="width:100px;height:40px" @click="user">用户端</el-button>
                    <el-button type="primary" style="width:100px;height:40px"  @click="enterprise">企业端</el-button>
                    <el-button type="primary" style="width:100px;height:40px" @click="background">后台管理端</el-button>
                  </span>
                </el-dialog>
              </el-form-item>
              <div style="margin-left: 190px">
                <el-link @click="goforget" type="info">忘记密码</el-link
                >&nbsp;&nbsp;&nbsp;
                <el-link @click="gozc" type="info">免费注册</el-link>
              </div>
              <div>
                <div style="width: 330px; height: 40px; margin: 180px auto">
                  <el-divider></el-divider>
                  <div style="width: 310px; margin: 0 auto; font-size: 12px">
                    <span style="color: rgb(160, 160, 160)"
                      >当前公司有部分任务需要放在此平台上，面对对象是内部员工或者是招聘的实习生，以及面试后未进入本公司，但有意向接受本公司任务的面试者。
                    </span>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <!-- +++++++++++++++++++++++++++++++++++++++++++登录组件+++++++++++++++++++++++++++++++++++++ -->
      </el-main>
      <el-footer style="margin-top: 2px; background: #313131; height: 150px">
        <div
          style="
            color: rgb(160, 160, 160);
            width: 700px;
            height: 120px;
            margin-top: 12px;
            margin-left: 150px;
          "
        >
          <span>优聘科技</span>&nbsp;&nbsp;&nbsp;<span>学识云平台</span
          ><br /><br />
          <span style="font-size: 12px"
            >优聘科技企业信息化&nbsp;&nbsp;&nbsp;&nbsp;Copyright&nbsp;@2015 -
            2021 YOYOHR.COM ALL Rights Reserved</span
          ><br /><br />
          <div class="inimg">
            <img src="../assets/images/login1.png" alt="" />
            <img src="../assets/images/login2.png" alt="" />
          </div>
          <span style="font-size: 12px"
            >ICP许可证：鄂B2-20190497&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鄂ICP备：15018236号-1</span
          >
        </div>
      </el-footer>
    </el-container>
  </div>
</template>



<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
.inimg img {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 10px;
}
.inimg {
  display: inline-block;
}
.el-header img {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 20px;
}
.img {
  /* border: red solid 1px; */
  background-image: url("../assets/qietu/蒙版组 14.png");
  background-repeat: no-repeat;
  width: 718px;
  height: 550px;
  position: relative;
  left: 220px;

  /* float: left; */
  /* margin-left: 250px; */
  /* margin-top: 0px; */
}
.content {
  position: absolute;
  top: 50px;
  left: 720px;
  /* right: 210px; */
  /* margin-top: 20px; */
  /* margin-right: 150px; */
  border: white 1px solid;
  background-color: white;
  /* float: right; */
  width: 370px;
  height: 500px;
  border-radius: 5px;
}
.phonew {
  width: 320px;
  margin-right: 50px;
  margin-top: 30px;
}
.main {
  padding: 0px;
  background-color: #f3f3f3;
}
</style>
<script>
export default {
  name: "login",
  data() {
    return {
      centerDialogVisible: false,
      content: {},

      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        mobile: [
          { required: false, message: "请输入手机号", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: false, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    login() {
      /* let {mobile,password } = this.ruleForm;
        this.$http({
            methods:'post',
            url:'/login',
            data:{user:mobile,password:password}
        }).then(res=>{
            console.log(res);
            let{code}=res.data;
            if(code == '200'){
                sessionStorage.setItem('username',mobile);//当关闭浏览器，其缓存的用户名密码都删除掉
                this.$router.push('/rwgl');//重定向为home
            }
        }) */
      // sessionStorage.setItem('username');//当关闭浏览器，其缓存的用户名密码都删除掉
      this.$router.push("/rwgl"); //重定向为home
    },
    gozc() {
      
      this.$router.push("/register");
    },
    goforget() {
      this.$router.push("/forget");
    },
    user(){
    /*  this.$refs.ruleFormRef.validate(async (valid)=>{
      console.log(valid);
      if(!valid) return
      
      const {data:res} =await this.$http.post('login',this.ruleForm)
      console.log(res);
      if (result.meta.status !== 200) {
        
          return this.$message.error('登陆失败,账号或密码错误')
        } else {
          this.$message.success('登录成功')
        }
}) */
 this.$refs.ruleFormRef.validate(async valid=>{
      if(!valid) return;
    const {data:res} =await  this.$http.post('login',this.ruleForm);
    if (res.meta.status !==200) return this.$message.error('您的账户名或密码错误！');
    
    this.$message.success('成功登录用户端!');
    console.log(res);
    window.sessionStorage.setItem('token',res.data.token);
    this.$router.push("/Userrwdt");
      
    
     
})

    /*   this.$http({
        method:'post',
        url:'login'
      }).then(response=>{
        console.log(valid);
      }).catch(function(err){
        console.log(err);
      })
 */

      // this.$router.push("/Userrwdt");
    },
    enterprise(){
      this.$refs.ruleFormRef.validate(async valid=>{
      if(!valid) return;
    const {data:res} =await  this.$http.post('login',this.ruleForm);
    if (res.meta.status !==200) return this.$message.error('您的账户名或密码错误！');
    
    this.$message.success('成功登录企业端!');
    console.log(res);
    window.sessionStorage.setItem('token',res.data.token);
    this.$router.push("/qyrwdt");
      
    
     
})
     
     
    },
    background(){
      this.$refs.ruleFormRef.validate(async valid=>{
      if(!valid) return;
    const {data:res} =await  this.$http.post('login',this.ruleForm);
    if (res.meta.status !==200) return this.$message.error('您的账户名或密码错误！');
    
    this.$message.success('成功登录后台管理端!');
    console.log(res);
    window.sessionStorage.setItem('token',res.data.token);
    this.$router.push("/rwgl");
    })
      
    },
  },
};
</script>

